//1.创建ui组件
//2.创建model
//3.将ui组件和model进行连接
import React from 'react';
import {connect} from 'umi';
import {Button} from 'antd'

const Dva = (props: any) => {

    const {dispatch} = props;
    const {tagsList} = props.tags;
    // console.log(props)
    // console.log(tagsList)

    const getData = () => {
        //使用model, 获取数据
        dispatch({
            type: 'tags/fetchTags', // 调用方法的方式, /model的命名空间/方法名
            payload: '参数哦'   //传入方法的参数
        })
    }

    return (
        <div>
            <h1>Dva的使用</h1>
            <Button onClick={getData}>点击获取tags数据</Button>
            {
                tagsList.list && tagsList.list.map((item, index) => {
                    return <p key={index}>{item.name}</p>
                })
            }
        </div>
    );
};

// 将ui组件和model进行连接
/**
 * connect函数的第一个参数,mapStateToProps,函数返回值直接放入到props中
 * ({tags}) => ({tags})     参数: 结构reducer中返回的tags值  返回值: 返回一个对象, 值将存入组件的props中
 */
export default connect(({tags}) => ({tags}))(Dva);

